<script setup lang="ts">
import { PropType, computed } from 'vue'
import type { TableData } from '@/api/operator/types'
import { ElTable, ElTableColumn } from 'element-plus'

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  accs: {
    type: Array as PropType<any[]>,
    default: () => []
  }
})

// 使用从父组件传递过来的 oprs 数据
const filteredMembers = computed(() => {
  // 如果父组件传递了 oprs 数据，使用它；否则使用 currentRow 中的 oprs
  const operatorList = props.accs.length > 0 ? props.accs : ((props.currentRow as any)?.accs || [])
  return Array.isArray(operatorList) ? operatorList : []
})

// 计算操作员总数
const operatorCount = computed(() => {
  return filteredMembers.value.length
})

// 格式化数字，保留2位小数
const formatNumber = (value: any): string => {
  if (value === null || value === undefined || value === '') {
    return '0.00'
  }
  const num = typeof value === 'string' ? parseFloat(value) : value
  return isNaN(num) ? '0.00' : num.toFixed(2)
}

// 空投总收益排序方法
const sortIncome = (a: any, b: any): number => {
  const valA = typeof a.income === 'string' ? parseFloat(a.income) : (a.income || 0)
  const valB = typeof b.income === 'string' ? parseFloat(b.income) : (b.income || 0)
  const numA = isNaN(valA) ? 0 : valA
  const numB = isNaN(valB) ? 0 : valB
  return numA - numB
}

// 当前余额排序方法
const sortBalance = (a: any, b: any): number => {
  const valA = typeof a.balance === 'string' ? parseFloat(a.balance) : (a.balance || 0)
  const valB = typeof b.balance === 'string' ? parseFloat(b.balance) : (b.balance || 0)
  const numA = isNaN(valA) ? 0 : valA
  const numB = isNaN(valB) ? 0 : valB
  return numA - numB
}

// 初始本金排序方法
const sortInitial = (a: any, b: any): number => {
  const valA = typeof a.initial === 'string' ? parseFloat(a.initial) : (a.initial || 0)
  const valB = typeof b.initial === 'string' ? parseFloat(b.initial) : (b.initial || 0)
  const numA = isNaN(valA) ? 0 : valA
  const numB = isNaN(valB) ? 0 : valB
  return numA - numB
}

// 总计耗损排序方法
const sortExpenditure = (a: any, b: any): number => {
  const valA = typeof a.expenditure === 'string' ? parseFloat(a.expenditure) : (a.expenditure || 0)
  const valB = typeof b.expenditure === 'string' ? parseFloat(b.expenditure) : (b.expenditure || 0)
  const numA = isNaN(valA) ? 0 : valA
  const numB = isNaN(valB) ? 0 : valB
  return numA - numB
}

// 运行天数排序方法
const sortDays = (a: any, b: any): number => {
  const valA = typeof a.days === 'string' ? parseFloat(a.days) : (a.days || 0)
  const valB = typeof b.days === 'string' ? parseFloat(b.days) : (b.days || 0)
  const numA = isNaN(valA) ? 0 : valA
  const numB = isNaN(valB) ? 0 : valB
  return numA - numB
}
</script>

<template>
  <div class="account-list">
    <div class="list-header">
      <h4>数目:{{ operatorCount }}</h4>
    </div>
    
    <ElTable 
      :data="filteredMembers" 
      style="width: 100%"
      max-height="600"
      border
      :default-sort="{ prop: 'uid', order: 'ascending' }"
    >
      <ElTableColumn 
        prop="uid" 
        label="UID" 
        width="120"
        align="center"
        sortable
      />
      <ElTableColumn 
        prop="income" 
        width="120"
        label="空投总收益" 
        align="center"
        sortable
        :sort-method="sortIncome"
        :sort-orders="['ascending', 'descending']"
      >
        <template #default="{ row }">
          {{ formatNumber(row.income) }}
        </template>
      </ElTableColumn>
      <ElTableColumn 
        prop="balance" 
        label="当前余额" 
        align="center"
        sortable
        :sort-method="sortBalance"
        :sort-orders="['ascending', 'descending']"
      >
        <template #default="{ row }">
          {{ formatNumber(row.balance) }}
        </template>
      </ElTableColumn>
      <ElTableColumn 
        prop="initial" 
        label="初始本金" 
        width="120"
        align="center"
        sortable
        :sort-method="sortInitial"
        :sort-orders="['ascending', 'descending']"
      >
        <template #default="{ row }">
          {{ formatNumber(row.initial) }}
        </template>
      </ElTableColumn>
      <ElTableColumn 
        prop="expenditure" 
        label="总计耗损" 
        width="120"
        align="center"
        sortable
        :sort-method="sortExpenditure"
        :sort-orders="['ascending', 'descending']"
      >
        <template #default="{ row }">
          {{ formatNumber(row.expenditure) }}
        </template>
      </ElTableColumn>
      <ElTableColumn 
        prop="days" 
        width="120"
        label="运行天数" 
        align="center"
        sortable
        :sort-method="sortDays"
        :sort-orders="['ascending', 'descending']"
      />
      <ElTableColumn 
        prop="itime" 
        label="开始时间" 
        width="180"
        align="center"
        sortable
      />
    </ElTable>
  </div>
</template>

<style scoped>
.account-list {
  padding: 10px;
}

.list-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.list-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}
</style>